<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: wsh
 * @Date: 2024-03-29 09:54:12
 * @LastEditors: wsh
 * @LastEditTime: 2024-05-27 14:17:16
-->
<template>
  <div class="box" @mouseenter="pauseAutoPlay" @mouseleave="resumeAutoPlay">
    <div class="box-left">
      <img :src="leftButton" alt="" @click="prevImage" class="button-img">
    </div>
    <div class="box-centre">
      <div class="box-centre-wicket" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
        <img v-for="(image, index) in images" :key="index" :src="image" :alt="'Image' + (index + 1)" class="centre-img" />
      </div>
    </div>
    <div class="box-dots">
      <span v-for="(dot, index) in images" :key="index" :class="{ active: index === currentIndex }"
        @click="currentIndex = index"></span>
    </div>
    <div class="box-right">
      <img :src="rightButton" alt="" @click="nextImage" class="button-img">
    </div>
  </div>
</template>
<script setup>
import { ref, defineProps, onMounted, onUnmounted } from 'vue';
import leftButton from "@/assets/imgs/icon-hom3/leftButton.png";
import rightButton from "@/assets/imgs/icon-hom3/rightButton.png";
import oneStopOffice1 from "@/assets/imgs/icon-hom3/oneStopOffice1.png";
import oneStopOffice2 from "@/assets/imgs/icon-hom3/oneStopOffice2.png";
import oneStopOffice3 from "@/assets/imgs/icon-hom3/oneStopOffice3.png";
import oneStopOffice4 from "@/assets/imgs/icon-hom3/oneStopOffice4.png";

const images = ref([
  oneStopOffice1, oneStopOffice2, oneStopOffice3, oneStopOffice4
]);
const currentIndex = ref(0);
const buttonsVisible = ref(false);
let intervalId;
let isPaused = ref(false);

// function startAutoPlay() {
//   if (!isPaused.value) {
//     intervalId = setInterval(nextImage, 3000);
//   }
// }

function stopAutoPlay() {
  clearInterval(intervalId);
  intervalId = null;
}

function pauseAutoPlay() {
  buttonsVisible.value = true;
  isPaused.value = true;
  stopAutoPlay();
}

function resumeAutoPlay() {
  buttonsVisible.value = false;
  if (isPaused.value) {
    isPaused.value = false;
    // startAutoPlay();
  }
}

function nextImage() {
  currentIndex.value = (currentIndex.value + 1) % images.value.length;
}

function prevImage() {
  console.log(currentIndex.value - 1 + images.value.length, 'currentIndex.value - 1 + images.value.length');
  currentIndex.value = (currentIndex.value - 1 + images.value.length) % images.value.length;
  pauseAutoPlay();
  // setTimeout(resumeAutoPlay, 3000);
}

onMounted(() => {
  // startAutoPlay();
});

onUnmounted(() => {
  stopAutoPlay();
});  
</script>

<style scoped lang="scss">  .box {
    padding: 20px 0;
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;

    .box-right,
    .box-left {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;

      .button-img {
        width: 50%;
      }
    }

    .box-centre {
      flex: 1;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      // width: 100%;
      overflow: hidden;
      transition: transform 0.5s ease;

      .box-centre-wicket {
        display: flex;
        height: 90%;

        .centre-img {
          width: 100%;
          max-height: 100%;
        }
      }

    }

    .box-dots {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      bottom: 2px;
      width: 100%;

      span {
        width: 6px;
        height: 6px;
        margin: 0 4px;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        cursor: pointer;
        transition: background-color 0.3s ease;
      }

      span.active {
        background-color: white;
      }
    }

  }
</style>